<template>
    <div id="home">
        <section ref="sections" style=" margin-bottom: 62px;margin-top:50px;">
            <div @click="toGo(v)" id="list" v-for="(v,i) in imgurl" :key="i">
                <div>
                    <img :src="v.banner7url.replace('{size}','150')" alt="">
                    <!-- <img v-view='v.imgurl' alt=""> -->
                </div>
                <div>{{v.rankname}}</div>
                <div>
                    <i class="mui-icon mui-icon-arrowright"></i>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import BannerView from './BannerView.vue'
import Imgurl from '../db/Ranking.js'
export default {
    data() {
        return {
            imgurl: ''
        }
    },
    components: {
        BannerView,
    },
    created() {
        var that = this;
        // that.imgurl = Imgurl;
        that.$http({
            url: '/RankingList',
            method: 'post',
        }).then((res) => {
            console.log('pai:',res.data);
            that.imgurl = res.data;
            // res.data.forEach(function(v, i) {
            //     that.imgurl.forEach(function(val, index) {
            //         if (v.rankname == val.rankname) {
            //             val['rankid'] = v.rankid
            //         }
            //     }, this);
            // }, this);
            // console.log(that.imgurl);

        })
    },
    methods: {
        toGo(v){
            this.$router.push({path: '/RankingPage', query: {id:v.rankid,name:encodeURIComponent(v.rankname)}})
        },
    },
    watch: {
        $route(to, from) {
            // 拦截要前往的路由
            console.log('to:',to);
            console.log('from:',from);
        }
    }
}
</script>
<style scoped>
#list {
    display: flex;
    margin: 10px;
    align-items: center;
    cursor: pointer;
}

#list>div {
    flex: 1;
}

#list>div:nth-child(1),
#list>div:nth-child(1)>img {
    border: 1px solid transparent;
}

#list>div:nth-child(2) {
    flex: 3;
    margin-left: 10px;
}

#list>div img {
    width: 90px;
    height: 90px;
}
</style>
